<template>
    <div class="list-container">
        <el-card class="box-card">
            <div class="search">
                
                <div class="item" style="margin-right:10px;">
                    <span>学科：</span>
                    <el-select placeholder="请选择学科" v-model="query.subjectId" style="width:300px;" clearable @clear="getExamPaperAnswerList">
                        <el-option
                            v-for="item in subjectList"
                            :key="item.id"
                            :label="item.name+' ( '+item.levelName+' )'"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                
                <el-button type="primary" class="searchBtn" @click="getExamPaperAnswerList">查询</el-button>
            </div>
            <div class="table">
                    <el-table
                        width="100%"
                        :data="tableData"
                        stripe border>
                        <el-table-column
                            prop="id"
                            label="id"
                            width="60px">
                        </el-table-column>
                        <el-table-column
                            prop="paperName"
                            label="试卷名称">
                        </el-table-column>
                        <el-table-column
                            prop="userName"
                            label="用户名称">
                        </el-table-column>
                        <el-table-column
                            label="得分">
                            <template slot-scope="scope">
                                <span>{{scope.row.userScore}}/{{scope.row.paperScore}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="题目对错">
                            <template slot-scope="scope">
                                <span>{{scope.row.questionCorrect}}/{{scope.row.questionCount}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="doTime"
                            label="耗时">
                        </el-table-column>
                        <el-table-column label="提交时间" width="180px">
                            <template slot-scope="scope">
                                {{scope.row.createTime | dateFormat}}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" >
                            <template slot-scope="scope">
                            <div class="btns">
                                <el-button class="btn"  @click="show(scope.row.id)">查看</el-button>
                            </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页区域 -->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            class="pagination"
                            :current-page="query.pageIndex"
                            :page-sizes="[1, 2, 5, 10]"
                            :page-size="query.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data(){
        return {
            query: {
                subjectId: null,
                pageIndex: 1,
                pageSize: 10,
                status: 2
            },
            tableData: [],
            total: 0,
            subjectList:[]
        }
    },
    created(){
        this.getSubjectList();
        this.getExamPaperAnswerList();
    },
    methods:{
        //查询学科列表
        getSubjectList(){
            this.getRequest("/api/admin/subject/list").then(resp => {
                if(resp && resp.code == 200){
                    this.subjectList = resp.obj;
                }
            })
        },
        //查询答题记录
        getExamPaperAnswerList(){
            this.getRequest("/api/admin/examPaperAnswer/page",{
                pageIndex: this.query.pageIndex,
                pageSize: this.query.pageSize,
                subjectId: this.query.subjectId,
                status:  this.query.status
            }).then( resp => {
                if( resp ){
                    this.tableData = resp.data;
                    this.total = resp.total;
                }
            })
        },
        //监听pagesize改变的事件
        handleSizeChange(newSize) {
            //console.log(newSize);
            this.query.pageSize = newSize
            this.getExamPaperAnswerList();
        },
        //监听页码值改变的事件
        handleCurrentChange(newPage) {
            //console.log(newPage);
            this.query.pageIndex = newPage
            this.getExamPaperAnswerList();
        },
        //查看试卷
        show(id){
             this.$router.replace({path: "/admin/correcting/read",query: {'finishId':id}});
        }

    }
}
</script>

<style lang="scss" scoped>
.list-container{
    font-family: "华文楷体";
    .box-card{
        border-radius: 10px;
        color:#1A1A1A;
        .search{
            margin-top: 10px;
            display: flex;
            align-items: center;
            color:#1A1A1A;
            font-family: "黑体";
        }
        .table{
         margin-top: 10px;
         width: 100%;
         //内容居中
         /deep/.el-table th > .cell {
              text-align: center;
          }
          
          /deep/.el-table .cell {
              text-align: center;
          } 
          .btns{
            display: flex;
            justify-content: space-around;
          }
          .btn{
            border: none;
            font-size: 12px;
            margin:0 10px;
            padding: 0;
            cursor: pointer;
            color: #66BB6A;
          }
      }
      .pagination{
        margin: 20px 0 0 0;
        display: flex;
        justify-content: flex-end;
      }
    }
}
</style>